<template>
  <div class="JNPFAmount">
    <el-input v-show="showMoney"
      v-model.trim="totalprice"
      clearable
      maxlength="15" 
      @focus="switch2Number"
      placeholder="请输入金额">
      <template slot="prepend" v-if="config.currency">{{config.currency}}</template>
      <template slot="append" v-if="config.unit">{{config.unit}}</template>
   </el-input>
   <el-input-number ref="numberInId" v-show="!showMoney"
       v-model="innerValue"
       :controls-position="config.controlsPosition"
       :min="config.min"
       :max="config.max"
       :step="config.step"
       :precision="config.precision"
       :disabled="config.disabled"
       clearable
       placeholder="请输入金额"
       @focus="uninputMoney($event)"
       @blur="inputMoney($event)">
       <template slot="prepend" v-if="config.currency">{{config.currency}}</template>
       <template slot="append" v-if="config.unit">{{config.unit}}</template>
    </el-input-number>
 </div>
 </template>
<script>
import { priceFormat,bfbFormat,getAmountChinese } from '@/components/Generator/utils'
export default {
  props: {
    config: {
        type: Object,
        default: () => { }
    },
    value: {
        default: 0
    }
  },
  model: {
    prop: 'value',
    event: 'change'
  },
  created() {
    debugger
    this.$nextTick(()=>{
      this.innerConfig = this.config!=null?this.config:{}
      this.innerValue = this.value
      this.formatType = this.innerConfig.formatType
    })
  },
  data(){
    return {
      showMoney:true,
      innerConfig:this.config!=null?this.config:{},
      innerValue: this.value,
      totalprice:this.priceFormat(this.value)
    }
  },
  computed:{
    isShowChina:{
      get(){
          return this.config.showChinese&&this.config.currency==='¥'
      },
      set(value){
      }
    }
  },
  watch: {
    innerValue:
    // delayer(newVal => {
    //     this.totalprice = this.inputMoney2(newVal)
    //     console.log('totalprice='+this.totalprice+';val='+newVal )
    //     debugger
    //     newVal && this.$emit('change', newVal)
    // }),
     {
    handler: function(newVal, oldVal) {
      // this.delayer(()=>{
      //   this.$nextTick(()=>{
      //     this.totalprice = this.inputMoney2(newVal)
      //     console.log('totalprice='+this.totalprice+';val='+newVal )
      //     debugger
      //     newVal && this.$emit('change', newVal)
      //   })
      // })
        
    },
    deep: true,
    immediate: true,
  },
  
    totalprice(val) {
      // val && this.$emit('change', this.uninputMoney2(val))
      // console.log('uninputMoney2(val)='+this.uninputMoney2(val)+';'+val )
    },
    // value(val) {
    //   this.innerValue = val
    // },
    config(val) {
      this.innerConfig = val
      this.formatType = this.innerConfig.formatType
    }
  },
  methods: {
    delayer (action, delay = 100) {
    let timer = -1;
      return nv => {
          clearTimeout(timer);
          timer = setTimeout(() => {
              action(nv);
          }, delay);
      };
  },
    switch2Number(){
      this.showMoney = false
      this.$nextTick(()=>{
        this.$refs.numberInId.focus()
      })
    },
    // 失去焦点金额格式化
    inputMoney(el) {
      debugger
      let val = el.target.value
      this.inputMoney2(el.target.value)
      this.$emit('change', [Number(val)])
    },
    inputMoney2(val) {
      console.log('this.formatType='+this.innerConfig.formatType)
      this.showMoney = true;
      let temp = Number(val) || null;
      if(this.innerConfig.formatType===2){
        this.totalprice = this.bfbFormat(temp)
        return
      }
      this.totalprice = this.isShowChina ? getAmountChinese(temp):this.priceFormat(temp)
      debugger
    },
      // 获得焦点金额去掉格式
    uninputMoney(el) {
      this.totalprice = this.uninputMoney2(el.target.value)
    },
    uninputMoney2(val) {
      let newValue
      // debugger
      this.showMoney = false
      if(this.innerConfig.formatType===2){
          newValue = this.unfoematBfbc(val)
        }else{
          newValue = this.delcommafy(val)
        }
      return newValue
    },
    bfbFormat(num,n){
      n = this.innerConfig&&this.innerConfig.precision? this.innerConfig.precision:2;
      return bfbFormat(num,n)
    },
    priceFormat(num,n){  
      n = this.innerConfig&&this.innerConfig.precision? this.innerConfig.precision:2;
      return priceFormat(num,n)
    },
    //去除千分位中的‘，’
    delcommafy (num){
      if(!num) return num;
      num = num.toString();
      num = num.replace(/,/gi, '');
      if (num.indexOf('.00') >0) num = parseInt(num); 
      return num;
    },
    unfoematBfbc (num){
      if(!num) return num;
      num = num.toString();
      num = num.replace(/%/gi, '');
      console.log('num='+num)
      // num = parseN(num); 
      return num;
    }
  }
} 
</script>
<style lang="scss" scoped>
.explain-text {
  font-size: 12px;
  color: #aaa;
  line-height: 20px;
}
.JNPFAmount {
  .el-input-number {
    width: 100%;
  }
}
</style>